<template>
  <view>
    <!-- 搜索框 -->
    <view class="suckTop">
      <my-search @searchClick="gotoSearch"></my-search>
    </view>
    <!-- 轮播图区域 -->
    <swiper indicator-dots circular autoplay :interval="3000" indicator-color="rgb(255,255,255, .7)"
      indicator-active-color="#ff3f34">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <navigator :url="'/subPackages/goods_detail/goods_detail?goods_id=' + item.goods_id" class="navigator">
          <image :src="item.image_src" class="tab-item"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- tab栏 -->
    <view class="tab-list">
      <view v-for="(item, index) in tabList" :key="index" @click="goto(item)">
        <image :src="item.image_src" class="tab-item" mode="widthFix"></image>
      </view>
    </view>
    <!-- 楼层 -->
    <view class="floor" v-for="(item, index) in floorList" :key="index">
      <!-- 楼层标题 -->
      <view class="floor-title">
        <image :src="item.floor_title.image_src" mode="widthFix" class="floor-title-image"></image>
      </view>
      <!-- 楼层商品列表 -->
      <view class="floor-list">
        <navigator class="floor-list-left" :url="item.product_list[0].navigator_url">
          <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width  + 'rpx'}" mode="widthFix"></image>
        </navigator>
        <view class="floor-list-right">
          <navigator :url="item1.navigator_url" class="floor-right-list" v-for="(item1, index1) in item.product_list" :key="index1" v-if="index1 !== 0">
            <image :src="item1.image_src" mode="widthFix" :style="{width: item1.image_width + 'rpx'}"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
    import badgeMixins from '../../mixins/badgeMixins.js'
  export default {
    mixins: [badgeMixins],
    data() {
      return {
        // 轮播图图片数据列表
        swiperList: [],
        // tab栏图片数据列表
        tabList: [],
        // 楼层数据
        floorList: []
      };
    },
    methods: {
      // 发起请求获取轮播图数据
      async getSwiperList() {
        const {
          data: res
        } = await uni.$http.get('api/public/v1/home/swiperdata')
        // console.log(res)
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.swiperList = res.message
        // console.log(this.swiperList)
      },
      // 发起请求获取tab栏数据
      async getTabList() {
        const {
          data: res
        } = await uni.$http.get('api/public/v1/home/catitems')
        // console.log(res)
        if (res.meta.status !== 200) return uni.$showMsg()
        this.tabList = res.message
      },
      // 点击tab 栏 item项，跳转页面
      goto(item) {
        // 点击分页跳转到 tabBar 的分类 页面
        if (item.name === '分类') {
          uni.switchTab({
            url: '/pages/cate/cate'
          })
        }
        // console.log(item)
      },
      // 获取首页楼层数据
      async getFloorData() {
        const {
          data: res
        } = await uni.$http.get('api/public/v1/home/floordata')
        console.log(res)
        if (res.meta.status !== 200) return uni.$showMsg()
        
        // 对每件商品的url地址进行处理
        res.message.forEach((item) => {
          item.product_list.forEach((product) => {
            product.navigator_url = '/subPackages/goods_list/goods_list?' + product.navigator_url.split('?')[1]
          })
        })
        
        this.floorList = res.message
      },
      // 点击跳转到search页面
      gotoSearch() {
        uni.navigateTo({
          url: '/subPackages/search/search'
        })
      }
    },
    onLoad() {
      // 在页面加载的时候，获取轮播图数据
      this.getSwiperList()
      // 在页面加载的时候，获取tab栏数据
      this.getTabList()
      // 在页面加载的时候，获取楼层数据
      this.getFloorData()
    }
  }
</script>

<style lang="scss">
  swiper {
    height: 330rpx;
    background-color: pink;

    .navigator {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .tab-list {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;

    .tab-item {
      width: 140rpx;
    }
  }

  .floor {
    .floor-title {
      .floor-title-image {
        width: 100%;
      }
    }

    .floor-list {
      display: flex;
      padding: 10rpx;
      .floor-list-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around
      }
    }
  }
  .suckTop {
    position: sticky;
    top: 0;
    z-index: 999;
  }
</style>
